<template>
<!--      <a-list-->
<!--        itemLayout="horizontal"-->
<!--        :dataSource="data"-->
<!--      </a-list>>-->
<div style="float: left;width: 540px;height: 540px">
              <a-list itemLayout="horizontal" :dataSource="data" >
                  <a-list-item slot="renderItem" slot-scope="item">
                      <a-list-item-meta :description="moment(item.add_time).format('YYYY-MM-DD HH:mm:ss')">
                          <a-avatar slot="avatar" :style="{backgroundColor: '#f56a00', verticalAlign: 'middle'}">
                              {{item.publiser.substring(0,1)}}</a-avatar>
                          <a slot="title" herf="#" >{{item.title}}</a>

                      </a-list-item-meta>
                      <a-button style="width: 120px" @click="showModal(item.id)" block>查看</a-button>

                  </a-list-item>

              </a-list>
                <a-modal :title="info.title" v-model="visible" @ok="hideModal" okText="确认" cancelText="取消">
                    <p v-html="info.message"></p>
                </a-modal>
          </div>

</template>

<script>
    import moment from 'moment';
    import {getNews} from "@/api/files"
export default {
  data () {
    return {
        visible: false,
        data: [],
        info:{},
    }
  },mounted(){
      this.getAllNews();
    },
  methods: {
      moment,

     showModal(e) {
              this.info=this.data[e-1]
             // data.forEach()
              this.visible = true;
             // console.log(e)
          },
      hideModal() {
              this.visible = false;
          },
     getAllNews(){
          getNews().then((reponse)=>{
              // console.log(reponse.data.results)
              this.data=reponse.data.results
              }).catch()
     }

  }
}
</script>

<style scoped>

</style>
